<template>
  <div class="editor-container">
    <div class="markdown-input">
      <div class="editor-header">
        <h3 class="editor-title">编辑区</h3>
      </div>
      <textarea 
        class="markdown-editor"
        :value="content"
        @input="$emit('content-changed', $event.target.value)"
        placeholder="在这里输入Markdown内容...">
      </textarea>
    </div>
    <div class="preview-area">
      <div class="preview-header">
        <h3 class="preview-title">预览区</h3>
      </div>
      <div class="preview-content" v-html="renderedHtml"></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  renderedHtml: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['content-changed'])
</script>